<template>
  <div class='content'>
    <box-container :toolsShow='false' class='bg-grey'>
      <box-style-1 class='box-style-3'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-1>
    </box-container>
    <box-container :toolsShow='false' class='bg-grey'>
      <box-style-6 class='box-style-3'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-6>
    </box-container>
    <box-container :toolsShow='false' class='bg-grey'>
      <box-style-1-small class='box-style-1-small'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-1-small>
    </box-container>
    <box-container :toolsShow='false' class='bg-grey'>
      <box-style-2 class='box-style-3'
                   :showTitle='true' title="标题">
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-2>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-3 class='box-style-3'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-3>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-4 class='box-style-4'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-4>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-5 class='box-style-5' title="标题">
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-5>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-7 class='box-style-5'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-7>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-8 class='box-style-5'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-8>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-9 class='box-style-5'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-9>
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <box-style-10 class='box-style-5'>
        <!-- 内容区自定义，默认内容使用时删除 -->
      </box-style-10>
    </box-container>

  </div>
</template>
<script>
import boxContainer from '../common/box-container'
import Box1 from '../../cell/box/box-style-1'
import Box1Small from '../../cell/box/box-style-1-small'
import Box2 from '../../cell/box/box-style-2'
import Box3 from '../../cell/box/box-style-3'
import Box4 from '../../cell/box/box-style-4'
import Box5 from '../../cell/box/box-style-5'
import Box6 from '../../cell/box/box-style-6'
import Box7 from '../../cell/box/box-style-7'
import Box8 from '../../cell/box/box-style-8'
import Box9 from '../../cell/box/box-style-9'
import Box10 from '../../cell/box/box-style-10'

export default {
  components: {
    'box-container': boxContainer,
    'box-style-1': Box1,
    'box-style-1-small': Box1Small,
    'box-style-2': Box2,
    'box-style-3': Box3,
    'box-style-4': Box4,
    'box-style-5': Box5,
    'box-style-6': Box6,
    'box-style-7': Box7,
    'box-style-8': Box8,
    'box-style-9': Box9,
    'box-style-10': Box10,
  },
  data () {
    return {}
  },
  mounted () {
    // this.$Notice.open({
    //   title: '注意',
    //   desc: '当前部分盒容器背景图片尺寸非标准，暂无尺寸规范，坐等标准',
    //   duration: 0,
    // });
  },
  beforeDestroy () {
    this.$Notice.destroy()
  },
}
</script>
<style lang="scss" scoped>
@import "./box.scss";
</style>

